<div class="credit_content">
<ion-header>
  <ion-toolbar>
    <ion-title class="titleFont">
      <div>FINSHARE PAY</div>
      <div id="badge">
        <div (click)="toNotification()">
          <svg class="title_icon" aria-hidden="true">
            <use xlink:href="#iconnotification"></use>
          </svg>
        </div>
        <div id="badges" (click)="toBadges(totalNum)">
          <!-- <ion-icon name="headset-outline"></ion-icon> -->
          <svg class="title_icon" aria-hidden="true">
            <use xlink:href="#iconservice"></use>
          </svg>
        </div>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div >
   <!--  <div class="titleFont header_top">
      <div>FINSHARE PAY</div>
      <div>
        <div (click)="toNotification()">
          <svg class="icon_header" aria-hidden="true">
            <use xlink:href="#iconnotification"></use>
          </svg>
        </div>
        <div>
          <svg class="icon_header" aria-hidden="true">
            <use xlink:href="#iconservice"></use>
          </svg>
        </div>
      </div>
    </div> -->
    <div class="credit_content_title">
      <ion-grid>
        <ion-row>
          <ion-col>
            <div class="content_title">
              <p>
                {{'myCredit.myCredit_title' | translate}}
              </p>
              <!--  <p>
                Your personal wallet for
              </p>
              <p>
                everyday purchases.
              </p> -->
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div class="available_credit">
      <ion-grid class="ion-padding-horizontal">
        <ion-row>
          <ion-col class="clean_padding">
            <div id="c_content">
              <div>
                <ion-grid>
                  <ion-row>
                    <ion-col>
                      <p class="available_credit_title"> {{'myCredit.available_credit' | translate}}</p>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col>
                      <p class="amt_font">$9,900.00</p>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col>
                      <ion-grid>
                        <ion-row>
                          <ion-col id="t_1">
                            <span>
                              <p>{{'myCredit.total_credit' | translate}}</p>
                              <p class="bold">$ 15,000.00</p>
                            </span>
                          </ion-col>
                          <ion-col id="t_2">
                            <span>
                              <p>{{'myCredit.current_balance' | translate}}</p>
                              <p class="bold">$ 5,100.00</p>
                            </span>
                          </ion-col>
                        </ion-row>
                      </ion-grid>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div class="transaction_credit">
      <ion-grid class="ion-padding-horizontal">
        <ion-row>
          <ion-col class="clean_padding">
            <div id="transcation_content">
              <ion-grid class="i-grid">
                <ion-row>
                  <ion-col class="i-col">
                    <a [routerLink]="[ '/tabs/myCredit/transaction']">
                      <p class="main_area">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icontransaction"></use>
                        </svg>
                        {{'myCredit.transaction' | translate}}
                      </p>
                    </a>
                  </ion-col>
                  <ion-col>
                    <a >
                      <p class="main_area font_center">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#iconincreasecredit"></use>
                        </svg>
                        {{'myCredit.increase_credit' | translate}}
                      </p>
                    </a>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div class="provide_info">
      <ion-grid class="ion-padding-horizontal">
        <ion-row>
          <ion-col class="font_white clean_padding_horizontal">
            <ion-label>
              <h2> {{'myCredit.user_information_auth_title' | translate}}</h2>
            </ion-label>
            <ion-label>
              <ion-text>
                {{'myCredit.user_information_auth' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="clean_padding_horizontal">
            <div style="width: 100%;">
              <ion-item-group>
                <ion-item lines="none" class="border_row">
                  <ion-avatar slot="start">
                    <div class="icon_img">
                      <!--  <ion-img src="../../../assets/images/android/drawable-mdpi/proofofidentity.png" alt=""></ion-img> -->
                      <svg class="icon_verified" aria-hidden="true">
                        <use xlink:href="#iconproofofidentity"></use>
                      </svg>
                    </div>
                  </ion-avatar>
                  <ion-label slot="start">
                    <h2>{{'myCredit.proof_of_identity' | translate}}</h2>
                    <p class="ion-text-left">{{'myCredit.proof_of_identity_items' | translate}}</p>
                  </ion-label>
                  <ion-label>
                    <ion-button size="small" expand="full" class="ion-float-end i_btn"
                      color="default_primary_blue"> {{'myCredit.verified' | translate}} </ion-button>
                  </ion-label>
                </ion-item>
              </ion-item-group>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="clean_padding_horizontal">
            <div>
              <ion-item-group>
                <ion-item lines="none" class="border_row">
                  <ion-avatar slot="start">
                    <div class="icon_img">
                      <svg class="icon_verified" aria-hidden="true">
                        <use xlink:href="#iconbankaccount"></use>
                      </svg>
                      <!-- <ion-img src="../../../assets/images/android/drawable-mdpi/bankaccount.png" alt=""></ion-img> -->
                    </div>
                  </ion-avatar>
                  <ion-label slot="start">
                    <h2>{{'myCredit.bank_account' | translate}}</h2>
                    <p class="ion-text-left">{{'myCredit.bank_account_items' | translate}}</p>
                  </ion-label>
                  <ion-label>
                    <ion-button size="small" expand="full" class="ion-float-end i_btn"
                      color="default_primary_blue"> {{'myCredit.verified' | translate}} </ion-button>
                  </ion-label>
                </ion-item>
              </ion-item-group>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="clean_padding_horizontal">
            <div style="width: 100%;">
              <ion-item-group>
                <ion-item lines="none" class="border_row">
                  <ion-avatar slot="start">
                    <div class="icon_img">
                      <svg class="icon_verified" aria-hidden="true">
                        <use xlink:href="#iconemployer"></use>
                      </svg>
                      <!-- <ion-img src="../../../assets/images/android/drawable-mdpi/employer.png" alt=""></ion-img> -->
                    </div>
                  </ion-avatar>
                  <ion-label slot="start">
                    <h2>{{'myCredit.employer' | translate}}</h2>
                    <p class="ion-text-left">{{'myCredit.employer_items' | translate}}</p>
                  </ion-label>
                  <ion-label slot="">
                    <ion-button size="small" expand="full" class="ion-float-end i_btn"
                      color="default_primary_blue"> {{'myCredit.verified' | translate}} </ion-button>
                  </ion-label>
                </ion-item>
              </ion-item-group>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</ion-content>
</div>